<template>
	<div class="main">
		<div class="search">
			<el-form :inline="true" :model="search">
				<el-form-item label="订单编号">
					<el-input v-model="search.groupNo" size="small" placeholder="订单编号" clearable></el-input>
				</el-form-item>
				<el-form-item label="收货人">
					<el-input v-model="search.receiptName" size="small" placeholder="收货人" clearable></el-input>
				</el-form-item>
				<el-form-item label="联系电话">
					<el-input v-model="search.phone" size="small" placeholder="联系电话" clearable></el-input>
				</el-form-item>
				<el-form-item label="类型">
					<el-select v-model="search.type" size="small" placeholder="类型" clearable>
						<el-option :value="1" label="批发"></el-option>
						<el-option :value="2" label="租赁"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="search.status" size="small" placeholder="状态" clearable>
						<el-option :value="1" label="未完成"></el-option>
						<el-option :value="3" label="已完成"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="时间范围">
					<el-date-picker v-model="search.time" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="search.description" size="small" placeholder="备注" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="info" size="small" @click="searchClick">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="list">
			<el-table :data="data" stripe style="width: 100%">
				<el-table-column type="expand">
					<template slot-scope="props">
						<div style="margin-left: 65px;" v-if="data && data.length">
							<div v-for="item in props.row.orders" :key="item.id">
								<div v-if="item.goods" style="margin-bottom: 10px;">
									<el-row>
										<el-col :span="6">
											<el-image :src="item.goods.cover" fit="contain" style="height: 60px;">
												<div slot="error" class="image-slot">
													<i class="el-icon-picture-outline" style="font-size: 60px;"></i>
												</div>
											</el-image>
										</el-col>
										<el-col :span="18">
											<el-descriptions>
												<el-descriptions-item label="商品名称">{{ item.goods.name }}
												</el-descriptions-item>
												<el-descriptions-item label="数量">{{ item.count }}</el-descriptions-item>
												<el-descriptions-item label="单价">{{ item.price }}</el-descriptions-item>
												<el-descriptions-item label="规格">
													{{ item.orderSpecs && item.orderSpecs.length ? item.orderSpecs.map(v => v.value).join(",") : '无' }}
												</el-descriptions-item>
												<el-descriptions-item label="总金额">{{ item.amountTotal }}
												</el-descriptions-item>
											</el-descriptions>
										</el-col>
									</el-row>

								</div>
								<div style="margin-bottom: 10px;" v-else>
									该商品订单已失效！
								</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="groupNo" label="订单编号"></el-table-column>
				<el-table-column prop="receiptName" label="收货人"></el-table-column>
				<el-table-column prop="phone" label="联系电话"></el-table-column>
				<el-table-column label="购货人">
					<template slot-scope="scope">
						{{ scope.row.user ? scope.row.user.nickname : '' }}
					</template>
				</el-table-column>
				<el-table-column label="地址">
					<template slot-scope="scope">
						{{ addSplicing(scope.row.address) }}
					</template>
				</el-table-column>
				<el-table-column label="支付方式">
					<template slot-scope="scope">
						{{ scope.row.payChannel === 0 ? '钱包支付' : '微信支付' }}
					</template>
				</el-table-column>
				<el-table-column label="类型">
					<template slot-scope="props">
						{{ props.row.type === 1 ? '批发' : '租赁' }}
					</template>
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="props">
						{{ props.row.status === 1 ? (props.row.type === 1 ? '已下单' : '租赁中') : props.row.status === 2 ? (props.row.type === 1 ? '已发货' : '租赁中') : '已完成' }}
					</template>
				</el-table-column>
				<el-table-column label="开始时间" prop="beginDate" />
				<el-table-column label="结束时间" prop="endDate" />
				<!-- <el-table-column prop="tradeNo" label="第三方订单流水号"></el-table-column> -->
				<el-table-column prop="description" label="备注" show-overflow-tooltip></el-table-column>
				<el-table-column label="发货时间" prop="shipTime">
					<template slot-scope="props">
						{{ props.row.shipTime ? props.row.shipTime : '未发货' }}
					</template>
				</el-table-column>
				<el-table-column label="下单时间" prop="createTime" />
				<el-table-column label="操作" width="170px">
					<template slot-scope="scope">
						<el-button @click="print = {...scope.row}; printShow = true" type="default">打印</el-button>
						<el-button v-if="(scope.row.status === 1 || scope.row.status === 2) && scope.row.type === 1"
							type="primary" @click="form = {...scope.row}; dialogShow = true; ">物流信息</el-button>
						<el-button v-if="scope.row.status === 1 || scope.row.status === 2" type="success"
							@click="form = {...scope.row}; form.status = 3; areYouOk();">确认完成</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="pageNo"
				:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>
		<el-dialog :title="form.id ? '修改' : '添加'" :visible.sync="dialogShow" width="700px" @close="dialogClose">
			<el-form ref="form" :model="form" label-width="100px" :rules="rules">
				<el-form-item prop="shipTime" label="发货时间">
					<el-date-picker v-model="form.shipTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
						placeholder="选择发货时间" align="right">
					</el-date-picker>
				</el-form-item>
				<el-form-item prop="shipTime" label="物流数据">
					<el-row>
						<el-col :span="1">
							<el-button type="primary" icon="el-icon-plus" circle
								@click="form.logistics.push({ time: '', address: '' })"></el-button>
						</el-col>
						<el-col :span="24" v-if="form.logistics.length">
							<table>
								<thead>
									<tr>
										<th>时间</th>
										<th>物流信息</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(item, index) in form.logistics" :key="index">
										<td>
											<el-date-picker v-model="item.time" type="datetime" placeholder="选择发货时间"
												align="right">
											</el-date-picker>
										</td>
										<td>
											<el-input v-model="item.address" type="text" clearable></el-input>
										</td>
										<td>
											<el-button type="danger" icon="el-icon-delete" size="mini" circle
												@click="form.logistics.splice(index, 1)"></el-button>
										</td>
									</tr>
								</tbody>
							</table>
						</el-col>
					</el-row>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submit">保存</el-button>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogShow = false">关闭</el-button>
			</span>
		</el-dialog>
		<el-dialog :visible.sync="printShow" width="1200" top="0px" >
			<div id="print">
				<div class="container">
					<div class="billBox">
						<img class="logo" src="@/assets/img/ck_logo.png">
						<h2>宏阳道具租赁出库单</h2>
						<div class="titleInfo">
							<p>订单号：{{ print.groupNo }}</p>
							<p>下单时间：{{ print.shipTime }}</p>
							<p>购货人：{{ print.user ? print.user.nickname : '' }}</p>
							<p>付款时间：{{ print.createTime }}</p>
							<p>发货时间：{{ print.createTime }}</p>
							<p>支付方式：{{ print.payChannel === 1 ? '微信支付' : '其他方式' }}</p>
							<p>收货人：{{ print.receiptName }}</p>
							<p>收货电话：{{ print.phone }}</p>
							<p>收货地址：{{ addSplicing(print.address) }}</p>
						</div>
						<table width="100%" border="2" class="tabtop13" align="center">
							<thead>
								<tr>
									<td>产品名称</td>
									<td>货号</td>
									<td>规格</td>
									<td>价格</td>
									<td>数量</td>
									<td>小计</td>
									<td>备注</td>
								</tr>
							</thead>
							<tbody>
								<tr v-for="item in print.orders" :key="item.id">
									<td>【{{item.goods.type === 1 ? '批发' : '租赁'}}】{{item.goods.name}}</td>
									<td>{{ item.goods.no }}</td>
									<td>({{ item.orderSpecs ? item.orderSpecs.map(v => v.value).join(',') : '无' }})</td>
									<td>￥{{ item.price }}</td>
									<td>{{ item.count }}</td>
									<td>￥{{ item.amountTotal }}</td>
									<td></td>
								</tr>
								<tr>
									<td colspan="5" class="textL">地址：甘肃省兰州市城关区新港城南和巷子258号</td>
									<td colspan="2" rowspan="3">
										合计：{{ print.orders && print.orders.length ? print.orders.map(v => v.amountTotal).reduce((prev, curr) => prev + curr) : 0 }}
									</td>
								</tr>
								<tr>
									<td colspan="5" class="textL">客户留言：{{ print.description }}</td>
								</tr>
								<tr>
									<td colspan="5" class="textL">备注：</td>

								</tr>
							</tbody>
						</table>
						<div class="dateText">
							<p>出库人签字：</p>
							<p>打印时间：{{ this.getFmtDate("yyyy-MM-dd hh:mm:ss") }}</p>
						</div>
					</div>
				</div>
			</div>
			<el-button type="primary" v-print="'#print'">打印</el-button>
			<!-- 			<span slot="footer" class="dialog-footer">
				<el-button @click="printShow = false">关闭</el-button>
			</span> -->
		</el-dialog>

	</div>
</template>

<script>
	import Print from 'vue-print-nb'
	import Vue from 'vue'
	Vue.use(Print);
	export default {
		name: "Order",
		data() {
			return {
				search: {},
				dialogShow: false,
				form: {
					logistics: []
				},
				data: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				rules: {
					username: [{
							required: true,
							type: 'string',
							message: '用户不能为空',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 30,
							message: '用户名长度在3-30位之间',
							trigger: 'blur'
						},
						{
							pattern: /^[0-9A-Za-z_]{3,30}$/,
							message: '用户名只能包含数字、字母、下划线',
							trigger: 'blur'
						},
						{
							validator: (rule, val, cb) => {
								let url = `order/repeat?username=${val}`
								if (this.form.id) url += `&id=${this.form.id}`
								this.$http.get(url).then(res => {
									if (res.code === 200) {
										if (res.data) {
											return cb(new Error('用户名已存在！'))
										}
										cb()
									}
								})
							},
							trigger: 'blur'
						}
					],
					password: [{
							required: false,
							type: 'string',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 30,
							message: '密码长度在6-30位之间',
							trigger: 'blur'
						},
						{
							pattern: /^[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,30}$/,
							message: '密码只能包含数字、字母、特殊字符',
							trigger: 'blur'
						}
					],
					phone: [{
							required: true,
							type: 'string',
							message: '电话不能为空',
							trigger: 'blur'
						},
						{
							pattern: /^((13\d|14[57]|15[^4,\D]|17[678]|18\d)\d{8}|170[059]\d{7})$/,
							message: '电话号码格式不正确',
							trigger: 'blur'
						}
					],
					description: [{
						min: 0,
						max: 800,
						message: '备注长度在3-800位之间',
						trigger: 'blur'
					}]
				},
				print: {},
				printShow: false
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			getFmtDate(fmt) {
				const data = new Date();
				const o = {
					"M+": data.getMonth() + 1, // 月份
					"d+": data.getDate(), // 日
					"h+": data.getHours(), // 小时
					"m+": data.getMinutes(), // 分
					"s+": data.getSeconds(), // 秒
					"q+": Math.floor((data.getMonth() + 3) / 3), // 季度
					"S": data.getMilliseconds() // 毫秒
				};
				if (/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (data.getFullYear() + "").substr(4 - RegExp.$1.length));
				for (const k in o)
					if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[
						k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			},
			getData() {
				this.$http.post(`order/page?pageNo=${this.pageNo}&pageSize=${this.pageSize}`, this.search).then(res => {
					if (res.code === 200) {
						this.pageSize = res.data.size
						this.pageNo = res.data.current
						this.total = res.data.total
						this.data = res.data.records
					}
				})
			},
			sizeChange(val) {
				this.pageNo = 1;
				this.pageSize = val;
				this.getData();
			},
			currentChange(val) {
				this.pageNo = val;
				this.getData();
			},
			searchClick() {
				if (this.search.time && this.search.time.length) {
					this.search.beginDate = this.search.time[0];
					this.search.endDate = this.search.time[1];
				} else {
					delete this.search.beginDate;
					delete this.search.endDate;
				}
				this.pageNo = 1;
				this.getData()
			},
			dialogClose() {
				this.form = {
					logistics: []
				}
				this.$refs['form'].clearValidate()
			},
			submit() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.form.status = 2;
						if (this.form.id) {
							this.$http.put(`order`, this.form).then(res => {
								if (res.code === 200) {
									this.$Message.success(res.msg)
									this.getData()
									this.dialogShow = false
								}
							})
						} else {
							this.$http.post(`order`, this.form).then(res => {
								if (res.code === 200) {
									this.$Message.success(res.msg)
									this.getData()
									this.dialogShow = false
								}
							})
						}
					}
				});
			},
			areYouOk() {
				this.$confirm('是否确认完成?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post(`order/changStatus`, this.form).then(res => {
						if (res.code === 200) {
							this.$Message.success(res.msg)
							this.getData()
							this.dialogShow = false
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消确认完成！'
					});
				});
			},
			del(id) {
				this.$confirm('是否确认删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.delete(`order/${id}`).then(res => {
						if (res.code === 200) {
							this.getData()
							this.$Message.success(res.msg)
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			addSplicing(obj) {
				if (!obj) return ''
				return obj.province + obj.city + obj.area + obj.address
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.container {
		.billBox {
			width: 100%;
			height: auto;
			margin: 0px auto;
			position: relative;

			.logo {
				position: absolute;
				top: 0px;
				left: 10px;
				height: 50px;
				width: auto;
				display: block;
			}

			h2 {
				display: block;
				font-size: 36px;
				color: #333;
				line-height: 50px;
				font-weight: bold;
				text-align: center;
				margin-bottom: 40px;
			}

			.titleInfo {
				width: 100%;
				height: auto;
				overflow: hidden;
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 20px;

				p {
					display: block;
					min-width: 33.3%;
					text-align: left;
					font-size: 16px;
					color: #333;
					line-height: 30px;
					padding: 0 10px;
					box-sizing: border-box;
					line-height: 30px;
				}
			}

			table {
				table-layout: fixed;
				width: 100%;
				border-collapse: collapse;

				td {
					height: 25px;
					line-height: 150%;
					padding: 10px;
					text-align: center;
				}

				.textL {
					text-align: left;
				}
			}

			.dateText {
				display: flex;
				justify-content: space-between;
				flex-wrap: nowrap;
				font-size: 16px;
				color: #666;
				line-height: 40px;
			}
		}
	}

	.el-table__row .el-button {
		display: block !important;
		margin: 0 auto 5px auto !important;
	}

	.el-dialog__body {
		padding: 0;
	}

	.el-dialog {
		width: 1200px !important;
		margin-top: 0 !important;
	}
</style>
